<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Notes</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="timer-float.css">
  <link rel="icon" type="image/png" href="icon/icon32.png">
  <link rel="icon" sizes="16x16" href="icon/icon16.png">
  <link rel="icon" sizes="32x32" href="icon/icon32.png">
  <link rel="icon" sizes="48x48" href="icon/icon48.png">
  <link rel="icon" sizes="128x128" href="icon/icon128.png">
  <style>
    .drawer-section-title {
      font-size: 18px;
      color: #141414;
      font-weight: bold;
      padding: 0px 10px 5px 0px;
      margin: 0;
      display: block;
    }
    .quick-access-notes-section {
      padding: 24px 0 0 0;
    }
    .quick-docs-container, .quick-notes-container {
      border-radius: 8px;
      padding: 15px 15px 10px 15px;
      margin-bottom: 18px;
    }
    .quick-docs-list, .quick-notes-list {
      padding-left:0; margin:0; list-style:none;
      display:flex; flex-wrap:wrap; gap:6px;
    }
    .quick-notes-list {
      gap: 4px;
    }
    .quick-note-item {
      display: flex;
      align-items: baseline;
      position: relative;
    }
    .quick-note-delete {
      position: absolute;
      top: 4px;
      right: 4px;
      margin: 0;
      padding: 2px;
      width: 20px;
      height: 20px;
    }
    .quick-notes-list-notepad {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      justify-content: flex-start;
    }
    .quick-notes-list-notepad .quick-note-item {
      background: #fffbe6;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(200,180,80,0.10);
      width: 140px;
      height: 140px;
      padding: 25px 25px 25px 25px;
      font-size: 14px;
      color: #7a5c00;
      border: 1px solid #f7e7b7;
      transition: box-shadow 0.2s;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      /* overflow: visible; 允许内容全部显示 */
      position: relative;
      word-break: break-word;
      margin-bottom: 0;
      margin-right: 0;
    }
  </style>
</head>
<body>
  <!-- Notification Element -->
  <div id="notification" class="notification success">
    <p id="notification-message" class="notification-message"></p>
  </div>
  <header>
    <div class="logo">
      <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M24 4H6V17.3333V30.6667H24V44H42V30.6667V17.3333H24V4Z" fill="currentColor"></path>
      </svg>
      <h2>Task Tracker</h2>
    </div>
    <div id="main-nav"></div>
  </header>
  <div class="container">
    <div class="content">
      <div class="content-container">
        <div class="title-section">
          <div class="title-content">
            <p class="main-title">Quick Docs & Notes</p>
            <p class="subtitle">Store and quickly access your frequently used document links and jot down important notes for your daily work.</p>
          </div>
        </div>
        <div class="quick-access-notes-section">
          <div class="quick-docs-container card-section">
            <div class="quick-docs-header section-header" style="margin-bottom: 10px;">
              <span class="drawer-section-title">Quick Docs</span>
            </div>
            <ul id="quick-docs-list" class="quick-docs-list"></ul>
            <div id="add-doc-link-form" class="add-doc-link-form" style="margin-top:8px; display:flex; gap:8px; align-items:center;">
              <input id="doc-link-title" class="form-input" placeholder="Title" style="width:110px;">
              <input id="doc-link-url" class="form-input" placeholder="https://example.com" style="width:180px;">
              <button id="save-doc-link-btn" class="modal-button primary-button small-button">Save</button>
            </div>
          </div>
          <div class="quick-notes-container card-section">
            <div class="quick-notes-header section-header" style="margin-bottom: 10px;">
              <span class="drawer-section-title">Quick Notes</span>
            </div>
            <ul id="quick-notes-list" class="quick-notes-list quick-notes-list-notepad"></ul>
            <div id="add-note-form" class="add-note-form" style="margin-top:8px; display:flex; gap:8px; align-items:center;">
              <input id="note-input" class="form-input" placeholder="Enter your note..." style="flex:1;">
              <button id="save-note-btn" class="modal-button primary-button small-button">Save</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="notes.js"></script>
  <script src="nav.js"></script>
  <script src="timer-float.js"></script>
</body>
</html> 